<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text class="block text-[48rpx] font-extrabold mb-[40rpx] text-center text-blue-600 drop-shadow">测试多选框数据转换</text>
    
    <!-- 模拟后端返回的数据 -->
    <view class="bg-white p-[24rpx] rounded-[16rpx] mb-[24rpx]">
      <text class="text-[32rpx] font-bold mb-[16rpx] block">模拟后端数据：</text>
      <text class="text-[28rpx] text-gray-600 block mb-[8rpx]">socialInsu: "养老保险,失业保险,生育保险"</text>
      <text class="text-[28rpx] text-gray-600 block">socialWelfare: "低保,特困供养"</text>
    </view>

    <!-- 转换后的表单 -->
    <view class="bg-white p-[24rpx] rounded-[16rpx] mb-[24rpx]">
      <text class="text-[32rpx] font-bold mb-[16rpx] block">转换后的表单：</text>
      <FormView :fieldConfig="fieldConfig" :form="form" :showButtons="true" @submit="submitForm" />
    </view>

    <!-- 显示当前表单数据 -->
    <view class="bg-white p-[24rpx] rounded-[16rpx]">
      <text class="text-[32rpx] font-bold mb-[16rpx] block">当前表单数据：</text>
      <text class="text-[28rpx] text-gray-600 block mb-[8rpx]">socialInsu: {{ JSON.stringify(form.socialInsu) }}</text>
      <text class="text-[28rpx] text-gray-600 block">socialWelfare: {{ JSON.stringify(form.socialWelfare) }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import FormView from '@/components/FormView.vue'

const form = reactive<any>({})

const fieldConfig = {
  socialInsu: { 
    show: true, 
    label: '社会保险(可多选)', 
    edit: true, 
    type: 'checkbox', 
    options: ['养老保险', '医疗保险', '失业保险', '工伤保险', '生育保险'] 
  },
  socialWelfare: { 
    show: true, 
    label: '社会福利参与(可多选)', 
    edit: true, 
    type: 'checkbox', 
    options: ['低保', '特困供养', '残疾人补贴', '高龄补贴'] 
  }
}

onMounted(() => {
  // 模拟从后端获取的数据（逗号分隔的字符串）
  form.socialInsu = "养老保险,失业保险,生育保险"
  form.socialWelfare = "低保,特困供养"
  form.recordid = "test123"
})

function submitForm(formData: any, fieldConfig: any) {
  // 提交的表单数据
  
  // 验证是否已转换为数组
  if (Array.isArray(formData.socialInsu)) {
    // socialInsu 已正确转换为数组
  } else {
    // socialInsu 转换失败
  }
  
  if (Array.isArray(formData.socialWelfare)) {
    // socialWelfare 已正确转换为数组
  } else {
    // socialWelfare 转换失败
  }
  
  Taro.showToast({ 
    title: '数据转换成功！', 
    icon: 'success' 
  })
}
</script>
